<template>
  <div class="StabilityCoefficient">
    <div class="leftStabilityCoefficient">
      <div class="topLeftStabilityCoefficient">
        <div class="topLeftStabilityCoefficientTitle">
          <div>左脑</div>
          <div>稳定系数</div>
        </div>
        <div
          class="topLeftStabilityCoefficientNumber"
          :style="{ fontSize: leftLatestValueFontSize }">
          {{ leftBrainLatestValue }}
        </div>
      </div>
      <div class="maxNumber" :style="{ fontSize: leftMaxValueFontSize }">
        最大值：{{ leftBrainMaxValue }}
      </div>
      <div style="margin-top: 10px">
        <RainbowProgressBar
          :progress="leftBrainLatestValue"
          :max-value="leftBrainMaxValue" />
      </div>
    </div>

    <div class="rightStabilityCoefficient">
      <div class="topRightStabilityCoefficient">
        <div class="topRightStabilityCoefficientTitle">
          <div>右脑</div>
          <div>稳定系数</div>
        </div>
        <div
          class="topRightStabilityCoefficientNumber"
          :style="{ fontSize: rightLatestValueFontSize }">
          {{ rightBrainLatestValue }}
        </div>
      </div>
      <div class="maxNumber" :style="{ fontSize: rightMaxValueFontSize }">
        最大值：{{ rightBrainMaxValue }}
      </div>
      <div style="margin-top: 10px">
        <RainbowProgressBar
          :progress="rightBrainLatestValue"
          :max-value="rightBrainMaxValue" />
      </div>
    </div>

    <div class="allStabilityCoefficient">
      <div class="allStabilityCoefficientCenter">
        <div>
          <image
            style="width: 90px; height: 90px"
            src="../../../image/monitor/icon.png"></image>
        </div>
        <div class="content">
          <div>全脑稳定系数</div>
          <div :style="{ fontSize: allMaxValueFontSize }">
            最大值：{{ allBrainMaxValue }}
          </div>
        </div>
        <div
          class="StabilityCoefficientMax"
          :style="{ fontSize: allLatestValueFontSize }">
          {{ allBrainLatestValue }}
        </div>
      </div>

      <RainbowProgressBarSecond
        style="margin-top: 8px"
        :progress="allBrainLatestValue"
        :max-value="allBrainMaxValue"></RainbowProgressBarSecond>
    </div>
  </div>
</template>

<script>
import RainbowProgressBar from '@/components/RainbowProgressBar/RainbowProgressBar.vue'
import RainbowProgressBarSecond from '@/components/RainbowProgressBarSecond/RainbowProgressBarSecond.vue'

/**
 * @description 稳定系数显示组件
 * 用于显示左脑、右脑和全脑的稳定系数数值和进度条
 * 包含最新值和最大值的显示，并根据数值大小自动调整字体大小
 */
export default {
  name: 'StabilityCoefficient',
  components: {
    RainbowProgressBar,
    RainbowProgressBarSecond
  },
  props: {
    /** 左脑稳定系数最新值 */
    leftBrainLatestValue: {
      type: Number,
      default: 0
    },
    /** 左脑稳定系数最大值 */
    leftBrainMaxValue: {
      type: Number,
      default: 0
    },
    /** 右脑稳定系数最新值 */
    rightBrainLatestValue: {
      type: Number,
      default: 0
    },
    /** 右脑稳定系数最大值 */
    rightBrainMaxValue: {
      type: Number,
      default: 0
    },
    /** 全脑稳定系数最新值 */
    allBrainLatestValue: {
      type: Number,
      default: 0
    },
    /** 全脑稳定系数最大值 */
    allBrainMaxValue: {
      type: Number,
      default: 0
    }
  },
  computed: {
    /**
     * 左脑最新值字体大小
     * @returns {string} 当值是4位数（包括小数点后两位）时返回20px，否则返回60px
     */
    leftLatestValueFontSize() {
      // 将数值转为字符串并检查长度，考虑小数点后两位
      const valueStr = this.leftBrainLatestValue.toFixed(2);
      return valueStr.length >= 5 ? '40px' : '60px'
    },
    /**
     * 右脑最新值字体大小
     * @returns {string} 当值是4位数（包括小数点后两位）时返回20px，否则返回60px
     */
    rightLatestValueFontSize() {
      // 将数值转为字符串并检查长度，考虑小数点后两位
      const valueStr = this.rightBrainLatestValue.toFixed(2);
      return valueStr.length >= 5 ? '40px' : '60px'
    },
    /**
     * 全脑最新值字体大小
     * @returns {string} 当值是4位数（包括小数点后两位）时返回20px，否则返回50px
     */
    allLatestValueFontSize() {
      // 将数值转为字符串并检查长度，考虑小数点后两位
      const valueStr = this.allBrainLatestValue.toFixed(2);
      return valueStr.length >= 5 ? '40px' : '50px'
    },
    /**
     * 左脑最大值字体大小
     * @returns {string} 统一返回20px
     */
    leftMaxValueFontSize() {
      return '20px'
    },
    /**
     * 右脑最大值字体大小
     * @returns {string} 统一返回20px
     */
    rightMaxValueFontSize() {
      return '20px'
    },
    /**
     * 全脑最大值字体大小
     * @returns {string} 统一返回20px
     */
    allMaxValueFontSize() {
      return '20px'
    }
  }
}
</script>

<style scoped lang="scss">
@import '../styles/stabilityCoefficient.scss';
</style>